<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .div1 {
        width: 800px;
        height: 40px;
        border: solid 1px black;
        margin: 30px auto;
    }
    </style>
</head>
<body>
        <table border="1" cellspacing="0" style="margin: auto;">
                <thead>
                    <tr>
                    <th>序号</th>
                    <th>学生ID</th>
                    <th>学生姓名</th>
                    <th>学生年龄</th>
                    <th>学生性别</th>
                    <th>学生班级</th>
                    <th>学生成绩</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
    <div class="div1"></div>
</body>
<script>
// 用来准备数据
const firstName = '赵钱孙李周吴郑王冯陈楚魏将沈韩杨朱琴尤许何吕施章'
const laseName = '氢氦锂铍硼碳氮氧氟氖钠镁铝硅磷硫氯氩钾钙'
const thirdName = '一二三四五六七八九十'
const gender = '男女'
const fn = (a, b) => Math.floor(Math.random() * (b - a + 1)) + a

const tableDataArr = []
for (let i = 0; i <= 1000; i++) {
    tableDataArr.push({
        id: i + 1,
        name: firstName[fn(0, 23)] + laseName[fn(0, 19)] + thirdName[fn(0, 9)],
        age: fn(16, 30),
        gender: gender[fn(0, 1)],
        class: fn(1910, 1920),
        score: fn(40, 100)
    })
}
// console.log(tableDataArr)

let pagenum = 1
let pagesize = 10
let startnum = (pagenum - 1) * pagesize

// for (let i = 0; i<10; i++)
// for (let i = 10; i<20; i++)
// for (let i = 20; i<30;  i++)
for (let i = startnum; i<startnum+pagesize; i++)
{
    // console.log(tableDataArr[i])
    // 1. 造tr标签
    let trObj = document.createElement('tr')
    // console.log(trObj)
    // 2. tr里面放td数据
    trObj.innerHTML = `
        <td></td>
        <td>${tableDataArr[i].id}</td>
        <td>${tableDataArr[i].name}</td>
        <td>${tableDataArr[i].age}</td>
        <td>${tableDataArr[i].gender}</td>
        <td>${tableDataArr[i].class}</td>
        <td>${tableDataArr[i].score}</td>
    `
    // 3. 追加到tbody里面
    document.querySelector('tbody').appendChild(trObj)
}

</script>
<script src="./js/page.js"></script>
<script>
let page1 = new Page('.div1', {
        pageTag: {
            first: '首页',
            prev: '上一页',
            list: null,     // 后期放分页页码 
            next: '下一页',
            last: '末页',
        },
        pageInfo: {// 分页页码的数据
            pageNum: 103,     // 当前页数
            pageSize: 10,    // 每页显示条数
            totalData: 1030, // 总条数
            // totalPage: 100,  // 总页数 = 向上取整（总条数 / 每页显示条数）
        },
        callback(pagenum) {
        // console.log('回调函数当前页', pagenum)
        let pagesize = 10
        let startno = (pagenum -1)*pagesize
        let html = ''
        for (let i = startno; i<startno+pagesize; i++) {
            // tableDataArr[i]
            html += `
                <tr>
                <td></td>
                <td>${tableDataArr[i].id}</td>
                <td>${tableDataArr[i].name}</td>
                <td>${tableDataArr[i].age}</td>
                <td>${tableDataArr[i].gender}</td>
                <td>${tableDataArr[i].class}</td>
                <td>${tableDataArr[i].score}</td>
                </tr>
            `
        }
        // 拼接数据最后覆盖
        document.querySelector('tbody').innerHTML = html

    }
    })


</script>
</html>